<template>
  <div>
    <el-container>
      <el-header class="header">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item>
            <el-button
              type="primary"
              circle=""
              icon="el-icon-plus"
              @click="add"
            ></el-button>
          </el-form-item>
          <el-form-item label="帐号：">
            <el-input
              placeholder="按帐号查询"
              v-model="keyword.account"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input
              placeholder="按手机号查询"
              v-model="keyword.phone"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              circle=""
              icon="el-icon-search"
              @click="loadUsers(true)"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table
          ref="multipleTable"
          :data="userData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column label="用户头像">
            <template slot-scope="props">
              <el-image
                style="width: 80px; height: 80px"
                :src="props.row.photo"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="账号"
            prop="account"
            width="90px"
          ></el-table-column>
          <el-table-column
            label="真实姓名"
            prop="realName"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="手机号"
            prop="phone"
            width="120px"
          ></el-table-column>
          <el-table-column
            label="邮箱"
            prop="email"
            width="160px"
          ></el-table-column>
          <el-table-column label="支付帐号" prop="payAccount"></el-table-column>
          <el-table-column
            label="创建日期"
            prop="createDate"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="操作日期"
            prop="updateDate"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="keyword.currentPage"
          :page-sizes="[1, 2, 3, 4, 5]"
          :page-size="keyword.pageSize"
          class="page"
          big
          layout="total,sizes,prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-main>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
        <el-form :model="user" ref="userForm" label-width="100px">
          <el-form-item label="头像：">
            <input type="file" id="file" style="text-align: left" />
          </el-form-item>
          <el-form-item label="帐号：" prop="username">
            <el-input v-model="user.account"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="user.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="性别：" prop="password">
            <!-- <el-input v-model="user.sex" ></el-input> -->
            <el-select
              v-model="user.sex"
              placeholder="请选择"
              style="width: 310px"
            >
              <el-option
                v-for="item in sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="真实姓名：" prop="password">
            <el-input v-model="user.realName"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="password">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="password">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="支付账号：" prop="password">
            <el-input v-model="user.payAccount"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import { getUsers, remove, insert, update, setPhoto } from "@/api/user.js";
export default {
  name: "",
  data() {
    return {
      user: {},
      title: "",
      keyword: { currentPage: 1, pageSize: 4 },
      total: 0,
      dialogVisible: false,
      userData: [],
      sex: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
    };
  },
  created() {
    this.loadUsers();
  },
  methods: {
    loadUsers(val) {
      if (val) {
        this.keyword.currentPage = 1;
      }
      getUsers(this.keyword).then((res) => {
        if (res.data.code === "0000") {
          this.userData = res.data.data.records;
          this.total = Number.parseInt(res.data.data.total);
        }
      });
    },
    handleSizeChange(val) {
      this.keyword.pageSize = val;
      this.loadUsers(false);
    },
    handleCurrentChange(val) {
      this.keyword.currentPage = val;
      this.loadUsers(false);
      console.log(`当前页: ${val}`);
    },
    add() {
      this.title = "添加用户";
      this.dialogVisible = true;
      this.user = {};
    },
    handleEdit(index, row) {
      this.title = "编辑";
      this.dialogVisible = true;
      this.user = row;
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row.id);
          remove(row.id).then((res) => {
            if (res.data.code == "0000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.loadUsers();
            }
            console.log(res.data.code);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    save() {
      if (this.title == "添加用户") {
        var oFiles = document.getElementById("file").files;
        console.log(oFiles[0]);
        var params = new FormData();
        params.append("file", oFiles[0]);
        setPhoto(params).then((res) => {
          if (res.data.code == "0000") {
            this.user.photo = res.data.data;
            insert(this.user).then((res) => {
              if (res.data.code === "0000") {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                });
                // this.$emit("show", this.dialogVisible);
                this.dialogVisible = false;
                this.loadUsers();
              }
            });
          }
        });
      } else if (this.title == "编辑") {
        this.user.updateDate = null;
        var oFiles1 = document.getElementById("file").files;
        console.log(oFiles1[0]);
        var params1 = new FormData();
        params1.append("file", oFiles1[0]);
        setPhoto(params1).then((res) => {
          if (res.data.code == "0000") {
            this.user.photo = res.data.data;
            update(this.user).then((res) => {
              if (res.data.code === "0000") {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                });
                // this.$emit("show", this.dialogVisible);
                this.dialogVisible = false;
                this.loadUsers();
              }
            });
          }
        });
      }
    },
  },
};
</script>

<style>
.header {
  text-align: left;
}
</style>